<template>
  <div class="node-setting">
    <div class="node-setting-content">
      <section class="dingflow-design">
        <div class="zoom" v-if="props.showZoom">
          <div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
          <span>{{ nowVal }}%</span>
          <div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
        </div>
        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
          <NodeWrap v-model:nodeConfig="nodeConfig" />
        </div>
      </section>
    </div>
    <!-- <errorDialog v-model:visible="tipVisible" :list="tipList" /> -->
    <promoterDrawer />
    <approverDrawer />
    <copyerDrawer />
    <conditionDrawer />
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => {}
  },
  showZoom: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['update:nodeConfig'])
let store = useStore()

const nodeConfig = computed({
  get(){
    return props.nodeConfig
  },
  set(val){
    emits('update:nodeConfig', val)
  }
})

watch(
  nodeConfig,
  newVal => {
    store.commit('flow/setNodeConfig', newVal)
  },
  { deep: true }
  )
  
  
let nowVal = ref(100)
const zoomSize = type => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return
    }
    nowVal.value -= 10
  } else {
    if (nowVal.value == 300) {
      return
    }
    nowVal.value += 10
  }
}
</script>

<style lang="scss">
@import '@/styles/workflow.css';
.node-setting {
  .node-setting-content {
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 30px;
  }
}

.error-modal-list {
  width: 455px;
}
</style>
